<template>

<div>
  <el-button type="write" @click="AddProcurement">新增</el-button>
</div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column prop="productName" label="产品名称" width="120" />
    <el-table-column prop="productNumber" label="产品编号" width="150" />
    <el-table-column prop="specification" label="规格型号" width="120" />
    <el-table-column prop="unit" label="单位" width="120" />
    <el-table-column prop="vendorName" label="供应商" width="170" /> <!-- 修改为 vendorName -->
    <el-table-column prop="number" label="采购申请数量" width="120" />
    <el-table-column prop="price" label="单价" width="120" />
    <el-table-column prop="sumMoney" label="总金额" width="120" />
    <el-table-column prop="dateRequired" label="需用日期" width="120" :formatter="formatDate" />
    <el-table-column prop="procurementId" label="采购申请主题" width="120" />
    <el-table-column fixed="right" label="操作" min-width="170">
      <template #default="scope">
        <el-button link type="danger" :icon="Delete" size="small" @click="Del(scope.row.detailsId)">删除</el-button>
        <el-button link type="warning" :icon="Edit" size="small" @click="Upd(scope.row.procurementId)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]"
    layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { Wread, Wwrite } from "@/axios/axiosHelper";
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const router = useRouter()

const form = reactive({
  pageIndex: 1,
  pageSize: 15,
  totalCount: 0,
  totalPage: 0,
})

const tableData = ref([])

// 假设这是供应商 ID 和名称的映射关系
const vendorMap = {
  1: '碧螺春茶叶有限公司',
  2: '江苏泰成有限公司',
  3: '北大医疗康复',
  4: '悦动电玩城',
  5: '万达',
  // 在这里添加更多的映射关系
}

onMounted(() => {
  Show();
})

const handleSizeChange = (val: number) => {
  form.pageSize = val;
  Show();
}

const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  Show();
}

const Show = () => {
  Wread.get("w2-read/api/Procurement/QueryPurchaseDetails", {
    params: {
      pageIndex: form.pageIndex,
      pageSize: form.pageSize
    }
  })
    .then(res => {
      const processedData = res.data.data.map((item: any) => {
        const vendorId = item.vendorId;
        item.vendorName = vendorMap[vendorId] || '未知供应商'; // 根据 ID 映射名称
        return item;
      });
      tableData.value = processedData;
      form.totalCount = res.data.totalCount;
      form.totalPage = res.data.totalPage;
    })
    .catch(err => {
      ElMessage.error(err.message)
    })
}

const Del = (detailsId: any) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      Wwrite.post("w2-write/api/Procurement/DelPurchaseDetails", {
        detailsId: detailsId
      })
        .then(res => {
          if (res.data.code == 100) {
            ElMessage.success(res.data.msg);
            Show();
          }
          else {
            ElMessage.error(res.data.msg);
            return;
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

const Upd = (procurementId: any) => {
  router.push({
    path: '/UpdPurchaseDetails',
    query: {
      procurementId: procurementId
    }
  })
}

const formatDate = (row: any, column: any, cellValue: string) => {
  const date = new Date(cellValue);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

const AddProcurement=()=>{
  router.push({path:'/CreateProcurement'})
}
</script>